<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .btn {
        display: inline-block;
        margin: 5px;
        padding: 5px;
        border: 1px solid #000;
        border-radius: 5px;
        cursor: pointer;
        /* background:; */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="dialog">
        <form>
          姓名:
          <input type="text" v-model="editForm.username" />
          地址：
          <input type="text" v-model="editForm.address" />
          成绩：
          <input type="text" v-model="editForm.grade" />
          <input type="submit" @click.prevent="onEdit" value="编辑" />
        </form>
      </div>
      <button @click="addItem">添加</button>
      <ul>
        <li v-for="(item, index) in list">
          {{item.username}} {{item.address}} {{item.grade}}
          <hr />
          <span @click="editItem(item)" class="btn">编辑</span>
          <span @click="removeItem(index)" class="btn">删除</span>
        </li>
      </ul>

      <div class="dialog">
        <form>
          姓名:
          <input type="text" v-model="formData.username" />
          地址：
          <input type="text" v-model="formData.address" />
          成绩：
          <input type="text" v-model="formData.grade" />
          <input type="submit" @click.prevent="onSubmit" value="添加" />
        </form>
      </div>
      <hr />
    </div>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const news = Mock.mock({
        'list|10': [
          {
            id: '@id',
            username: '@cname',
            address: '@city(true)',
            grade: '@integer(60, 100)',
          },
        ],
      })

      // 模拟接口，让数据成为异步数据（所有的接口都是异步）
      function createData() {
        return new Promise((resolve, reject) => {
          resolve(news.list)
        })
      }

      new Vue({
        el: '#app',
        data: {
          list: [],
          formData: {
            username: '',
            address: '',
            grade: '',
          },
          editForm: {
            username: '',
            address: '',
            grade: '',
          },
        },
        created() {
          this.getData()
        },
        methods: {
          // 获取数据
          async getData() {
            const data = await createData()
            // 数据赋值
            this.list = data
          },
          removeItem(index) {
            this.list.splice(index, 1)
          },
          addItem() {},
          editItem(item) {
            console.log(item, 'item')
            // 深拷贝：就是赋值一个一摸一样数据，且这个数据的修改不会影响原数据
            // 让数据回显
            this.editForm = JSON.parse(JSON.stringify(item))
          },
          onSubmit() {
            this.list.push({
              ...this.formData,
              id: Date.now(),
            })
            this.formData = {}
            console.log(this.formData, 'formData')
            console.log('添加')
          },
          onEdit() {
            console.log(this.editForm, '编辑')
            let index = this.list.findIndex((v) => v.id === this.editForm.id)
            // 替换数据
            this.list.splice(index, 0, this.editForm)
          },
        },
      })
    </script>
  </body>
</html>
